<template>
	<view class="data-block-container">
		<view class="data-block-title">
			<text>图表分析</text>
		</view>
		<view class="data-block">
			<view class="data-item" v-for="(item, index) in data" :key="index">
				<view class="item-name">{{item.name}}</view>
				<view class="item-value">{{item.value}}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'DataBlock',
	props: {
		data: {
			type: Array,
			default: () => []
		}
	}
}
</script>

<style scoped>
.data-block-container {
	width: 100%;
}

.data-block-title {
	padding: 20rpx 0;
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	color: #333;
	background: linear-gradient(90deg, rgba(0,103,255,0.1) 0%, rgba(0,103,255,0.3) 50%, rgba(0,103,255,0.1) 100%);
	border-radius: 8rpx;
	margin-bottom: 10rpx;
}

.data-block {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
	padding: 20rpx;
}

.data-item {
	flex: 1;
	min-width: 300rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.item-name {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 16rpx;
}

.item-value {
	font-size: 36rpx;
	color: #333;
	font-weight: bold;
}
</style> 